<template>
  <div>
      <el-card shadow="never" class="mb-5">
          <!-- flex 布局，内容垂直居中 -->
          <div class="flex items-center flex-col md:flex-row">
              <el-text>用户昵称</el-text>
              <div class="mb-2 ml-1 w-52 mr-1 md:ml-3 md:w-52 md:mr-5 md:mb-0">
                <el-input v-model="searchNickName" placeholder="请输入（模糊查询）" />
              </div>

              <el-text>用户状态</el-text>
              <div class="ml-3 w-36 mr-5 mb-2 md:mb-0">
                <el-select v-model="status" placeholder="---请选择---">
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>

              <div>
                <el-button type="primary" class="ml-3" :icon="Search" @click="getTableData">查询</el-button>
                <el-button class="ml-3" :icon="RefreshRight" @click="onReset">重置</el-button>
              </div>
          </div>
      </el-card>
      <!-- 表格 -->
      <el-card shadow="never">
        <!-- 分页列表 -->      
        <el-table :data="tableData" border stripe style="width: 100%" v-loading="tableLoading">
          
          <el-table-column prop="avatar" align="center" width="80" label="头像">
            <template #default="{row}">
              <img :src="row.avatar" width="60" height="60" />
            </template>
          </el-table-column>

          <el-table-column prop="nickname" width="150px" align="center" label="昵称" />

          <el-table-column prop="loginType" width="100px" align="center" label="登录方式">
            <template #default="{row}">
              <el-tag>
                {{ row.login_type == '1' ? '账号/邮箱' : '未知'}}
              </el-tag>
            </template>
          </el-table-column>
        
          <el-table-column align="center" label="用户角色" width="100px">
            <template #default="{row}">
              <el-tag>
                {{ row.role === 'ROLE_ADMIN' ? '博主' : '普通用户' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="ipAddress" width="130px" align="center" label="登录IP" />

          <el-table-column prop="ipSource" width="150px" align="center" label="登录地址" />

          <el-table-column prop="os" width="120px" align="center" label="登录系统" />

          <el-table-column prop="browser" width="120px" align="center" label="浏览器" />

          <el-table-column prop="isTop" label="是否禁用" width="70px">
            <template #default="{ row }">
              <el-tag v-if="row.userId == 1">博主</el-tag>
              <div v-else @click=handleIsDisabledChange(row)>
                  <el-switch 
                  v-model="row.status"
                  inline-prompt
                  :active-icon="Check"
                  :inactive-icon="Close"
                  :active-value="1"
                  :inactive-value="0"
                />
              </div>
              
            </template>
          </el-table-column>

          <el-table-column align="center" width="180" label="最后登录时间">
            <template #default="{row}">
              <span>{{ row.lastLoginTime }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="createTime" align="center" width="180" label="创建时间">
            <template #default="{row}">
              <span>{{ row.createTime }}</span>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->
        <div class="mt-10 flex justify-center">
            <el-pagination v-model:current-page="current" v-model:page-size="size" :page-sizes="[10, 20, 50]"
            :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
            :total="total" @size-change="handleSizeChange" @current-change="getTableData"/>
        </div>
      </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue';
import { Search, RefreshRight, Plus, Delete, Check, Close } from '@element-plus/icons-vue'
import { getUserPageList, changeUserStatus } from '@/api/admin/user'
import { showMessage } from '@/composables/util';


// 表格加载 Loading
const tableLoading = ref(false)
// 表格数据
const tableData = ref([])
// 当前页码，给了一个默认值 1
const current = ref(1)
// 总数据量，给了个默认值 0
const total = ref(0)
// 每页显示的数据量，给了个默认值 10
const size = ref(10)
// 分页查询的用户昵称
const searchNickName = ref('')
// 当前选择的用户状态
const status = ref(null)

// 获取分页数据
const getTableData = async () => {
  tableLoading.value = true;
  const res = await getUserPageList({
    current: current.value,
    size: size.value,
    status: status.value,
    nickname: searchNickName.value,
  })
  if (res.success) {
    console.log(res);
    tableData.value = res.data
    current.value = res.current
    size.value = res.size
    total.value = res.total
  }
  tableLoading.value = false;
}

getTableData()


// 用户状态 select
const statusOptions = [
  {
    value: 0,
    label: '正常',
  },
  {
    value: 1,
    label: '禁用',
  },
]


// onReset 重置
const onReset = () => {
  searchNickName.value = ''
  status.value = ''
  getTableData()
}

// 底部每页展示数量变化时
const handleSizeChange = (chooseSize) => {
  size.value = chooseSize
  // 重新获取分页数据
  getTableData()
}

// 禁用用户操作
const handleIsDisabledChange = async (row) => {
  
  const res = await changeUserStatus({
    id: row.id,
    userId: row.userId,
    status: row.status
  })
  if (res.success) {
    showMessage('操作成功')
  } else {
    showMessage(res.message, 'error')
  }
}


</script>